<template>
    <div class="photoinfo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
            <span>点击：{{photoinfo.click}}次</span>
        </p>

        <hr>

        <!-- 使用缩略图插件 -->
        <div class="suonue">
             <vue-preview :slides="list"></vue-preview>
        </div>


        <div class="content" v-html="photoinfo.content"></div>

        <cmt :id="id"></cmt>

    </div>
</template>

<script>

import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return{
            id:this.$route.params.id,
            photoinfo:{},
            list:[]
        }
    },
    created(){
        this.getPhotoInfo(),
        this.getThumbs()
    },
    methods:{
        getPhotoInfo(){
            this.$http.get("api/getimageInfo/"+this.id).then(result=>{
                if(result.body.status===0){
                    this.photoinfo=result.body.message[0]
                }
            })
        },
        getThumbs(){
            this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status===0){
                    //循环每个图片数据，加上宽高
                    result.body.message.forEach(item => {
                        item.w=600;
                        item.h=400;
                        item.msrc = item.src;
                    });
                    this.list=result.body.message
                }
            })
        }
    },
    components:{
        'cmt':comment

    }
    
}
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 3px;
    h3{
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }

    .content{
        font-size: 12px;
        line-height: 30px;
    }
    .suonue {
        /deep/ .my-gallery {
            display: flex;
            flex-wrap: wrap;
        figure {
            width: 30%;
            margin: 5px;
        img {
                width: 100%;
            }
        }
    }
    }
}
</style>